<template>
  <Page class="bg-[#f5f5f5] min-h-screen pb-[40rpx]">
    <!-- 头部 -->
    <!-- <view class="bg-gradient-to-r from-[#4a6bff] to-[#7b4cff] text-white rounded-b-[32rpx] shadow-md px-[32rpx] pt-[48rpx] pb-[40rpx]">
      <view class="flex items-center mb-[32rpx]">
        <view class="w-[96rpx] h-[96rpx] rounded-full bg-[#5b86e5] flex items-center justify-center text-[48rpx] mr-[24rpx]">
          <IconFont name="user" />
        </view>
        <view class="flex-1">
          <view class="text-[36rpx] font-bold mb-[8rpx]">张小明</view>
          <view class="text-[24rpx] opacity-80">ID: U20230815001 | 黄金会员</view>
        </view>
      </view>
      <view class="flex justify-between bg-[rgba(255,255,255,0.15)] rounded-[24rpx] p-[24rpx]">
        <view class="flex-1 text-center">
          <view class="text-[32rpx] font-bold mb-[4rpx]">¥1,250.00</view>
          <view class="text-[22rpx] opacity-80">账户余额</view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-[32rpx] font-bold mb-[4rpx]">黄金</view>
          <view class="text-[22rpx] opacity-80">信用等级</view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-[32rpx] font-bold mb-[4rpx]">158</view>
          <view class="text-[22rpx] opacity-80">信用积分</view>
        </view>
      </view>
    </view> -->
    <PageHeader title="我的评价" :showBack="true" />

    <view class="px-[24rpx] mt-[40rpx]">
      <!-- 信用等级卡片 -->
      <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx] mb-[32rpx]">
        <view class="flex items-center mb-[24rpx] pb-[16rpx] border-b border-[#f0f4ff]">
          <view class="w-[60rpx] h-[60rpx] rounded-full bg-gradient-to-r from-[#4a6bff] to-[#7b4cff] flex items-center justify-center text-white text-[32rpx] mr-[20rpx]">
            <IconFont name="medal" />
          </view>
          <view class="text-[32rpx] font-bold text-[#4a6bff]">信用等级</view>
        </view>
        <view class="flex flex-col items-center text-center bg-gradient-to-br from-[#f0f4ff] to-[#e6ebff] rounded-[20rpx] p-[32rpx] mb-[24rpx]">
          <view class="w-[120rpx] h-[120rpx] rounded-full bg-gradient-to-br from-[#ffd700] to-[#daa520] flex items-center justify-center mb-[20rpx] shadow-md">
            <IconFont name="crown" class="text-[64rpx] text-white" />
          </view>
          <view class="text-[36rpx] font-bold text-[#4a6bff] mb-[8rpx]">黄金会员</view>
          <view class="text-[28rpx] font-bold mb-[8rpx]">158 信用积分</view>
          <view class="text-[22rpx] text-[#666] mb-[20rpx]">升级钻石会员还需 43 分</view>
          <view class="w-full h-[16rpx] bg-[#e6e9f0] rounded-[8rpx] overflow-hidden mb-[20rpx]">
            <view class="h-full bg-gradient-to-r from-[#4a6bff] to-[#7b4cff] rounded-[8rpx]" style="width: 65%"></view>
          </view>
          <view class="flex justify-around w-full mt-[12rpx]">
            <view class="text-center">
              <IconFont name="percentage" class="text-[32rpx] text-[#4a6bff] mb-[8rpx]" />
              <view class="text-[22rpx] text-[#555]">服务费减免</view>
            </view>
            <view class="text-center">
              <IconFont name="tasks" class="text-[32rpx] text-[#4a6bff] mb-[8rpx]" />
              <view class="text-[22rpx] text-[#555]">优先派单</view>
            </view>
            <view class="text-center">
              <IconFont name="shield" class="text-[32rpx] text-[#4a6bff] mb-[8rpx]" />
              <view class="text-[22rpx] text-[#555]">信用保障</view>
            </view>
          </view>
        </view>
        <!-- 评价规则 -->
        <view class="bg-[#f8fbff] rounded-[20rpx] p-[32rpx] border border-[#e1e9ff]">
          <view class="text-[28rpx] font-bold text-[#4a6bff] mb-[24rpx] text-center">评价规则说明</view>
          <view class="grid grid-cols-3 gap-[20rpx] mb-[24rpx]">
            <view class="bg-white rounded-[16rpx] p-[24rpx] text-center shadow-md border-t-[8rpx] border-t-[#52c41a]">
              <IconFont name="thumbs-up" class="text-[40rpx] text-[#52c41a] mb-[12rpx]" />
              <view class="text-[24rpx] font-bold mb-[8rpx]">好评</view>
              <view class="text-[28rpx] font-bold text-[#52c41a] mb-[8rpx]">+3分</view>
              <view class="text-[22rpx] text-[#666]">任务完成质量高，服务态度好</view>
            </view>
            <view class="bg-white rounded-[16rpx] p-[24rpx] text-center shadow-md border-t-[8rpx] border-t-[#faad14]">
              <IconFont name="meh" class="text-[40rpx] text-[#faad14] mb-[12rpx]" />
              <view class="text-[24rpx] font-bold mb-[8rpx]">中评</view>
              <view class="text-[28rpx] font-bold text-[#faad14] mb-[8rpx]">+1分</view>
              <view class="text-[22rpx] text-[#666]">任务基本完成，但存在改进空间</view>
            </view>
            <view class="bg-white rounded-[16rpx] p-[24rpx] text-center shadow-md border-t-[8rpx] border-t-[#ff4d4f]">
              <IconFont name="thumbs-down" class="text-[40rpx] text-[#ff4d4f] mb-[12rpx]" />
              <view class="text-[24rpx] font-bold mb-[8rpx]">差评</view>
              <view class="text-[28rpx] font-bold text-[#ff4d4f] mb-[8rpx]">-3分</view>
              <view class="text-[22rpx] text-[#666]">任务未完成或服务质量差</view>
            </view>
          </view>
          <!-- 等级体系 -->
          <view class="mt-[32rpx]">
            <view class="text-[28rpx] font-bold text-[#4a6bff] mb-[24rpx] text-center">信用等级体系</view>
            <view class="flex justify-between gap-x-[12rpx]">
              <view class="flex-1 text-center p-[20rpx]">
                <view class="w-[64rpx] h-[64rpx] rounded-full bg-gradient-to-br from-[#c0c0c0] to-[#a9a9a9] flex items-center justify-center mx-auto mb-[12rpx] text-[32rpx] text-white"><IconFont name="shield" /></view>
                <view class="text-[22rpx] font-bold mb-[4rpx]">白银</view>
                <view class="text-[20rpx] text-[#666]">0-100分</view>
              </view>
              <view class="flex-1 text-center p-[20rpx]">
                <view class="w-[64rpx] h-[64rpx] rounded-full bg-gradient-to-br from-[#ffd700] to-[#daa520] flex items-center justify-center mx-auto mb-[12rpx] text-[32rpx] text-white"><IconFont name="medal" /></view>
                <view class="text-[22rpx] font-bold mb-[4rpx]">黄金</view>
                <view class="text-[20rpx] text-[#666]">101-200分</view>
              </view>
              <view class="flex-1 text-center p-[20rpx]">
                <view class="w-[64rpx] h-[64rpx] rounded-full bg-gradient-to-br from-[#b9f2ff] to-[#4dc0ff] flex items-center justify-center mx-auto mb-[12rpx] text-[32rpx] text-white"><IconFont name="gem" /></view>
                <view class="text-[22rpx] font-bold mb-[4rpx]">钻石</view>
                <view class="text-[20rpx] text-[#666]">201-500分</view>
              </view>
              <view class="flex-1 text-center p-[20rpx]">
                <view class="w-[64rpx] h-[64rpx] rounded-full bg-gradient-to-br from-[#ffd700] to-[#ffa500] flex items-center justify-center mx-auto mb-[12rpx] text-[32rpx] text-white"><IconFont name="crown" /></view>
                <view class="text-[22rpx] font-bold mb-[4rpx]">皇冠</view>
                <view class="text-[20rpx] text-[#666]">501分以上</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 评价历史卡片 -->
      <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx] mb-[32rpx]">
        <view class="flex items-center mb-[24rpx] pb-[16rpx] border-b border-[#f0f4ff]">
          <view class="w-[60rpx] h-[60rpx] rounded-full bg-gradient-to-r from-[#4a6bff] to-[#7b4cff] flex items-center justify-center text-white text-[32rpx] mr-[20rpx]">
            <IconFont name="history" />
          </view>
          <view class="text-[32rpx] font-bold text-[#4a6bff]">评价历史</view>
        </view>
        <view class="text-[28rpx] font-bold text-[#4a6bff] mb-[24rpx]">最近收到的评价</view>
        <view class="flex flex-col gap-y-[24rpx] max-h-[400rpx] overflow-y-auto">
          <view v-for="(item, idx) in historyList" :key="idx" class="flex p-[24rpx] border-b border-[#eee] last:border-b-0">
            <view class="w-[64rpx] h-[64rpx] rounded-full bg-[#f0f4ff] flex items-center justify-center text-[28rpx] text-[#4a6bff] mr-[20rpx]">
              <IconFont :name="item.avatarIcon" />
            </view>
            <view class="flex-1">
              <view class="flex justify-between mb-[8rpx]">
                <view class="text-[24rpx] font-bold">{{ item.user }}</view>
                <view class="text-[20rpx] text-[#666]">{{ item.type }}</view>
              </view>
              <view class="flex items-center mb-[8rpx]">
                <view class="flex text-[#ffc107] text-[22rpx] mr-[12rpx]">
                  <IconFont v-for="n in item.stars" :key="n" name="star" />
                  <IconFont v-if="item.halfStar" name="star-half" />
                </view>
                <view class="text-[24rpx] font-bold" :class="item.level">{{ item.levelText }}</view>
              </view>
              <view class="text-[22rpx] text-[#555] mb-[8rpx]">{{ item.comment }}</view>
              <view class="text-[20rpx] text-[#999] text-right">{{ item.date }}</view>
            </view>
          </view>
        </view>
      </view>

      
    </view>
  </Page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { showToast } from '@tarojs/taro'
import PageHeader from '@/components/PageHeader.vue'

const historyList = ref([
  {
    avatarIcon: 'user-tie', user: '科技公司', type: '任务发布方', stars: 5, halfStar: false, level: 'text-[#52c41a]', levelText: '好评', comment: '设计任务完成得非常出色，超出预期！沟通顺畅，交付及时，非常专业的服务。', date: '2023年8月15日'
  },
  {
    avatarIcon: 'store', user: '时尚商城', type: '任务发布方', stars: 4, halfStar: true, level: 'text-[#52c41a]', levelText: '好评', comment: '图片设计符合要求，修改响应迅速，整体体验很好，会继续合作！', date: '2023年8月10日'
  },
  {
    avatarIcon: 'user-graduate', user: '王女士', type: '个人发布方', stars: 4, halfStar: false, level: 'text-[#faad14]', levelText: '中评', comment: '任务基本完成，但比预定时间晚了一天，沟通方面可以更积极一些。', date: '2023年8月5日'
  }
])

const ratingOptions = [
  { value: 'good', label: '好评', icon: 'thumbs-up', color: 'text-[#52c41a]', border: '#52c41a' },
  { value: 'medium', label: '中评', icon: 'meh', color: 'text-[#faad14]', border: '#faad14' },
  { value: 'bad', label: '差评', icon: 'thumbs-down', color: 'text-[#ff4d4f]', border: '#ff4d4f' }
]
const selectedRating = ref('')
const ratingComment = ref('')

function submitRating() {
  if (!selectedRating.value) {
    showToast({ title: '请选择评价类型', icon: 'none' })
    return
  }
  showToast({ title: '评价提交成功！感谢您的反馈。', icon: 'success' })
  selectedRating.value = ''
  ratingComment.value = ''
}
</script>